<template>
  <div class="navmain">
    <ul class="navlist">
      <li
        v-for="(item, index) in navlist"
        :key="index"
        @mouseover="item.show = !item.show"
        @mouseout="item.show = !item.show"
      >
        <i class="iconfont"></i>
        <p>{{ item.name }}</p>
        <ol v-show="item.show" class="navtext">
          <li v-for="(items, index) in item.children" :key="index">
            <a :href="items.url">
              {{ items.name }}
            </a>
          </li>
        </ol>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navlist: [
        { name: '首页', url: '#', show: false, children: [] },
        {
          name: '关于红岩',
          url: '#',
          show: false,
          children: [
            { name: '红岩文化', url: '#' },
            { name: '博物馆机构', url: '#' },
            { name: '历史沿革', url: '#' }
          ]
        },
        {
          name: '公告动态',
          url: '#',
          show: false,
          children: [
            { name: '文博信息', url: '#' },
            { name: '政务平台', url: '#' },
            { name: '公告', url: '#' },
            { name: '专题报道', url: '#' }
          ]
        },
        {
          name: '馆藏精品',
          url: '#',
          show: false,
          children: [
            { name: '一级文物', url: '#' },
            { name: '二级文物', url: '#' },
            { name: '三级文物', url: '#' }
          ]
        },
        {
          name: '陈列展览',
          url: '#',
          show: false,
          children: [
            { name: '虚拟展览', url: '#' },
            { name: '基本陈列', url: '#' },
            { name: '复原陈列', url: '#' },
            { name: '临时展览', url: '#' },
            { name: '展览交流', url: '#' }
          ]
        },
        {
          name: '研究开发',
          url: '#',
          show: false,
          children: [
            { name: '历史研究', url: '#' },
            { name: '艺术创作', url: '#' },
            { name: '影音在线', url: '#' },
            { name: '文创产品', url: '#' }
          ]
        },
        {
          name: '公共教育',
          url: '#',
          show: false,
          children: [
            { name: '党性教育', url: '#' },
            { name: '爱国主义教育', url: '#' },
            { name: '研学实践教育', url: '#' },
            { name: '科普教育', url: '#' }
          ]
        },
        {
          name: '参观服务',
          url: '#',
          show: false,
          children: [
            { name: '景点介绍', url: '#' },
            { name: '服务内容', url: '#' },
            { name: '网上预约', url: '#' },
            { name: '志愿服务', url: '#' }
          ]
        },
        { name: '网上预约', url: '#', show: false, children: [] }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.navmain {
  position: relative;
  width: 3.5rem;
  height: 100%;
  background: url(../../assets/images/img28.png) no-repeat;
  background-size: 100% 100%;
  .navlist {
    height: 100%;
    display: flex;
    flex-direction: column;
    & > li {
      flex: 1;
    }
  }
}
</style>